<template>
  <div>
    <h2>基本信息</h2>
    <el-form label-width="120px">
      <el-form-item label="优惠券名称 :">
        <el-input placeholder="请输入内容" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="适用范围 :">
        <el-radio-group v-model="form.dis_type">
          <el-radio label="1">班课</el-radio>
          <el-radio label="2">图书</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="form.scope_type">
          <el-radio label="1">全部{{form.dis_type==1?'班课':"图书"}}</el-radio>
          <el-radio label="2">指定分类</el-radio>
          <el-radio label="3">指定{{form.dis_type==1?'班课':"图书"}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="100px">
        <el-tag v-for="(i,n) in form.commodity_id" :key="i.id" @click="remove(n)">
          {{i.name}}
        </el-tag>
        <Book v-show="this.form.dis_type=='2'&&this.form.scope_type=='3'" />
        <Bookfenlei v-show="this.form.dis_type=='2'&&this.form.scope_type=='2'" />
        <Class v-show="this.form.dis_type=='1'&&this.form.scope_type=='3'" />
        <Classfenlei @tree="tree" v-show="this.form.dis_type=='1'&&this.form.scope_type=='2'" />
      </el-form-item>

      <el-form-item label="类型 :">
        <el-radio-group v-model="form.receive_type">
          <el-radio label="1">领取</el-radio>
          <el-radio label="2">赠送</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动规则 :">
        满
        <el-input placeholder="请输入内容" style="width:120px" v-model="form.full_reduction"></el-input>
        减
        <el-input placeholder="请输入内容" style="width:120px" v-model="form.discounted_price"></el-input>
      </el-form-item>
      <el-form-item label="有效期 :">
        <el-radio-group v-model="form.valid_type">
          <el-radio label="1">固定天数</el-radio>
          <el-radio label="2">固定时间段</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入内容" v-model="form.valid_day" style="width:100px" v-show="this.form.valid_type==1">
        </el-input>
        <el-date-picker v-model="form.valid_start" style="width:300px" type="datetimerange"
          v-show="this.form.valid_type==2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发放数量 :">
        <el-input placeholder="请输入内容" v-model="form.num"></el-input><span>请输入发方数量,1-1000之间的整数</span>
      </el-form-item>
      <el-form-item label="每人限领 :">
        <span>限领</span>
        <el-input style="width:80px" v-model="form.restrict_num	"></el-input>张
      </el-form-item>
      <el-form-item style="margin-left:100px">
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button @click="add">保存并返回</el-button>
        <el-button type="primary">保存并返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import Book from "./zizu/book";
import Bookfenlei from "./zizu/bookfenlei";
import Class from "./zizu/class";
import Classfenlei from "./zizu/classfenlei";
export default {
  data() {
    return {
      msg: "",
      form: {
        dis_type: "1",
        scope_type: "",
        commodity_id: [],
        valid_type: "1",
        valid_day: "",
        valid_start: "",
        valid_end: "",
        discounted_price: "",
        full_reduction: "",
        name: "",
        num: 1,
        receive_type: "1",
        restrict_num: 1,
        grant: 0,
      },
    };
  },
  components: {
    Book,
    Bookfenlei,
    Class,
    Classfenlei,
  },
  mounted() {},
  methods: {
    remove(n) {
      this.form.commodity_id.splice(n, 1);
    },
    tree(data) {
      console.log(data);
      this.form.commodity_id = data;
    },
    add() {
      this.form.grant = 0;
      axios.post("/coupon", this.form).then((res) => {
        console.log(222);
        if (res) {
          this.$router.push("/FinanceOrderRefundList");
          console.log(111);
        }
      });
    },
  },
};
</script>

<style lang='scss'>
</style>
